/**
 * 监听在一个容器元素的滚动到底部时，自动执行绑定在该指令上的回调函数
 * 
 * 用法： 
 * <div v-contact-bottom="loadMoreMessages"></div>
 * loadMoreMessages(){}
 */
let contactBottom = {
  // 指令第一次绑定到元素时触发
  bind: function(el, binding) {
    // 定义滚动事件处理函数
    function handleScroll() {
      // 判断是否滚动到底部
      if (el.scrollTop + el.clientHeight === el.scrollHeight) {
        // 如果滚动到底部，就执行保存在元素上的回调函数
        el.__vueHandleScroll__();
      }
    }
    // 创建独立的回调函数，并将其保存在元素节点上
    el.__vueHandleScroll__ = function() {
      binding.value();
    };
    // 添加滚动事件监听器
    el.addEventListener('scroll', handleScroll);
  },
  // 指令与元素解绑时触发
  unbind: function(el) {
    // 移除滚动事件监听器
    el.removeEventListener('scroll', el.__vueHandleScroll__);
    // 删除元素节点上的滚动事件处理函数
    delete el.__vueHandleScroll__;
  }
}

const install = function (Vue) {
  Vue.directive('contactBottom', contactBottom)
}

if (window.Vue) {
  window['contactBottom'] = contactBottom
  Vue.use(install);
}

contactBottom.install = install
export default contactBottom

